<%--
  Created by IntelliJ IDEA.
  User: lt
  Date: 2018/8/31
  Time: 11:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<jsp:useBean id="today" class="java.util.GregorianCalendar" />
<html>
<head>
    <title>卷烟申购</title>

    <%--<link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap.min.css">--%>
    <%--<link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap-datetimepicker.min.css">--%>
    <%--<link rel="stylesheet" href="${contextPath}/static/layer/css/layui.css">--%>
    <script src="${contextPath}/static/statistics/js/jquery.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap.min.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.min.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.fr.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="${contextPath}/static/statistics/js/vue.js"></script>
    <script src="${contextPath}/static/statistics/js/echarts.min.js"></script>
    <script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.mockjax.js"></script>
    <script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.autocomplete.js"></script>

    <link rel="stylesheet" href="${contextPath}/static/XiaLaDuoXuan/css/public.css" media="all" />
    <!-- 数型插件 -->
    <link href="${contextPath}/static/ztree/css/zTreeStyle.css" rel="stylesheet" />
    <script type="text/javascript" src="${contextPath}/static/ztree/js/jquery.ztree.core-3.5.js"></script>
    <script type="text/javascript" src="${contextPath}/static/ztree/js/jquery.ztree.excheck-3.5.js"></script>
    <!-- 年周 -->
    <script src="${contextPath}/static/time/datetime.js"></script>
    <style>
        .autocomplete-suggestions {
            border: 1px solid #999;
            background: #FFF;
            overflow: auto;
        }

        .autocomplete-suggestion {
            padding: 2px 5px;
            white-space: nowrap;
            overflow: hidden;
        }

        .autocomplete-selected {
            background: #F0F0F0;
        }

        .autocomplete-suggestions strong {
            font-weight: normal;
            color: #3399FF;
        }

        .layui-input{
            height: 30px;
        }
        .multiSelect{
            margin-top: -33px;
        }
        input{
            border:0;
            outline:0;
            border-style:none none solid none; /*  上 右 下  左 */
            background-color:transparent;
        }
    </style>
</head>
<body style="background: rgba(119, 118, 118, 0.15);">
<div class="container-fluid" id="app">
    <form class="form-inline layui-form" style="margin-top: 50px; margin-bottom: 5px;">
        <%--<div class="form-group">--%>
            <%--<input type="text" class="form-control" id="turnCreateDate" placeholder="查询开始时间">--%>
        <%--</div>--%>
        <%--<div class="form-group">--%>
            <%--<input type="text" class="form-control" id="bindCreateDate" placeholder="查询结束时间">--%>
        <%--</div>--%>
        <%--<button type="button" class="btn btn-success" onclick="queryOrder();">查询</button>--%>
        <%--<button type="button" title="根据查询条件导出所有记录" onclick="exportExcel();"--%>
                <%--class="btn btn-info">导出Excel--%>
        <%--</button>--%>
        <%--<button type="button" class="btn btn-success" onclick="doPrint();" style="margin-top: 0px;">打印</button>--%>
        <%--<button type="button" class="btn btn-success" onclick="javascript:window.history.go(-2);window.close();">返回</button>--%>
    </form>
    <div style="width: 100%; margin-bottom: 10px;">
        年份 :
        <select class="input-sm" id="yearId" onchange="getWeeks(this)" >
            <c:forEach begin="${today.get(1)}" end="2020" var="i" step="1">
                <option value="<c:out value='${i}'/>"><c:out value='${i}'/>年</option>
            </c:forEach>
        </select>
        周次：
        <select class="input-sm" id="dateSearch" onchange="dateRange(this)">
            <option value="">请选择周次</option>
            <c:forEach begin="${today.get(3)}" end="52" var="i" step="1">
                <option value="<c:out value='${i}'/>">第<c:out value='${i}'/>周</option>
            </c:forEach>
        </select>
        时间段：<input id ="_dateRange_import" readonly="readonly" type="text" style="width: 180px;"/>
    </div>

    <div class="row" style="background-color: rgb(53, 147, 202);margin-right: 0px;margin-left: 0px; height: 37px;">
        <div class="col-sm-10" style="margin-top: 6px;">
            <strong style="font-size: 18px;color: #f9f9f9;">卷烟申购</strong>
        </div>
        <div class="col-sm-2" style="text-align: right">

        </div>
    </div>
    <div class="table-responsive" id="tableContainer" style="height: 600px">
        <!--startprint-->
        <table class="table table-striped table-condensed table-bordered" style="width: 1300px;">
            <thead style="background-color:#eee;">
                <tr>
                    <th>商品\店铺</th>
                    <th v-for="(shop, index) in shopList">{{ shop.shopName }}</th>
                </tr>
            </thead>
            <tbody>
            <tr v-for="(obj, index) in shopProductList">
                <td v-for="(map, index) in obj" style="width: 100px;">
                    <div v-if="index == 0" style="width: 120px;">{{map.confirmQuantity}}</div>
                    <input type="text" class="input" v-else :value="map.confirmQuantity" :id="map.productCode" :name="map.shopId" ondblclick="singleKtTobaccoOrder(this.id,this.name,this.value)" style="border:0;outline:0;background-color:transparent;border-style:none none solid none; text-align: right;">
                </td>
            </tr>
            </tbody>
        </table>
        <!--endprint-->
    </div>
    <div style="text-align: right;margin-top: 10px;" id="pageDiv"></div>
</div>
<!-- 新增商品内容 -->
<div id="authorizationInfoContent" class="hide">
    <div class="content_wrap" id="treeDemoProd">
        <div class="zTreeDemoBackgroundProd left">
            <div class="modal-body">
                <form id="confirmQuantityForm">
                    <div class="row">
                        <input type="text" name="productCode" id="productCode" style="display: none"/>
                        <input type="text" name="shopId" id="shopId" style="display:none"/>
                        <input type="text" name="confirmQuantity" id="confirmQuantity" style="height: 35px;"/>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div>
        <button id="roleAuthorizationBtn" class="btn btn-success btn-sm" style="left: 182px;top: 58px;position: fixed;" onclick="saveSingleKtTobaccoOrder()">确认</button>
    </div>
</div>

<script type="text/javascript" src="${contextPath}/static/franchisee/form.js"></script>
<script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.mockjax.js"></script>
<script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.autocomplete.js"></script>
<script src=${contextPath}/static/layer/layui.all.js></script>
<script>

    var laypage = layui.laypage,
        layer = layui.layer
    laydate = layui.laydate;

    var app = new Vue({
        el: '#app',
        data: {
            queryModel: {},
            shopObj:[],
            shopList: [],
            shopProductList: [],
            productList: [],
        },
        methods: {
        }
    })

    var getXYShopTobacco = function () {
        layer.load(1);
        var yearId = $("#yearId").val();
        var dateSearch = theWeek;
        app.queryModel = {year: yearId, weekNo: dateSearch}
        $.ajax({
            url: '${contextPath}/ktcount/getXYShopTobacco',
            type: 'post',
            data: app.queryModel,
            success: function (data) {
                layer.closeAll('loading')
                var dataArray = data.data;
                console.log(dataArray)
                var shopObj = [];
                var arrayObj = [];
                var shopList = dataArray.shopList;
                var shopProductList = dataArray.shopProductList;
                var productList = dataArray.productList

                for(var i = 0; i < shopList.length + 2; i++){
                    var array = {};
                    if(i == shopList.length){
                        array.shopName = '小计'
                    }else if(i == shopList.length+1){
                        array.shopName = '需求反馈'
                    }else {
                        array.shopName = shopList[i].shopName;
                    }
//                console.log(array)
                    shopObj.push(array)
                }
                app.shopList = shopObj;

                var arrayObjs = [];

                for(var i = 0; i < productList.length; i++){
                    var array = [];
                    var confirmQuantityH = 0;
                    for(var r = 0; r < shopList.length + 3; r++){
                        var obj = {}
                        if(r == 0){
                            obj.productCode = productList[i].productCode;
                            obj.shopId = "";
                            obj.confirmQuantity = productList[i].productName;
                        }else if (r == shopList.length + 1) {
                            obj.productCode = productList[i].productCode;
                            obj.shopId = "";
                            obj.confirmQuantity = confirmQuantityH;
                        } else if (r == shopList.length + 2) {
                            obj.productCode = productList[i].productCode;
                            obj.shopId = "";
                            obj.confirmQuantity = productList[i].conclusion;
                        } else {
                            obj.productCode = productList[i].productCode;
                            obj.shopId = shopList[r - 1].shopId;
                            obj.shopName = shopList[r - 1].shopName;
                            for (var j = 0; j < shopProductList.length; j++) {
                                if (productList[i].productCode == shopProductList[j].productCode && shopList[r - 1].shopId == shopProductList[j].shopId) {
                                    obj.confirmQuantity = shopProductList[j].confirmQuantity;
                                    confirmQuantityH += Number(shopProductList[j].confirmQuantity);
                                    break;
                                } else {
                                    obj.confirmQuantity = 0;
                                }
                            }
                        }
                        array.push(obj);
                    }
//                console.log(array)
                    arrayObjs.push(array)
                }

                app.shopProductList = arrayObjs;


            },
            error: function (error){
                layer.closeAll('loading')
                layer.msg("获取出错："+data.message)
            }
        })
    }

    var saveSingleKtTobaccoOrder = function () {
        layer.load(1);
        var yearId = $("#yearId").val();
        var dateSearch = $("#dateSearch").val();
        var productCode = $("#productCode").val();
        var shopId = $("#shopId").val();
        var confirmQuantity = $("#confirmQuantity").val();

        app.queryModel = {type: 2, year: yearId, weekNo: dateSearch,productCode: productCode, shopId: shopId, confirmQuantity: confirmQuantity, conclusion: confirmQuantity}
        console.log(app.queryModel)
        if (!shopId){
            saveShopTobaccoRequirement();
            return
        }
        $.ajax({
            url: '${contextPath}/ktcount/saveSingleKtTobaccoOrder',
            type: 'post',
            data: app.queryModel,
            success: function (data) {
                layer.closeAll('loading')
                layer.close(modalIndex);
                if (data.success == false){
                    layer.msg("获取出错："+data.message)
                    return
                }
                layer.msg("提示："+data.message)
                getXYShopTobacco();
            },
            error: function (error){
                layer.close(modalIndex);
                layer.closeAll('loading')
                layer.msg("获取出错："+data.message)
            }
        })
    }

    var saveShopTobaccoRequirement = function () {
        layer.load(1);
        $.ajax({
            url: '${contextPath}/ktcount/saveShopTobaccoRequirement',
            type: 'post',
            data: app.queryModel,
            success: function (data) {
                layer.closeAll('loading')
                if (data.success == false){
                    layer.msg("获取出错："+data.message)
                    return
                }
                layer.msg("提示："+data.message)
                getXYShopTobacco();

            },
            error: function (error){
                layer.closeAll('loading')
                layer.msg("获取出错："+data.message)
            }
        })
    }

    var singleKtTobaccoOrder = function (productCode,shopId,confirmQuantity) {
        layer.load(1);

        var yearId = $("#yearId").val();
        var dateSearch = $("#dateSearch").val();
        if(dateSearch == ""){
            layer.closeAll('loading')
            layer.msg("提示：请选择年周！")
            return;
        }
        $("#productCode").val(productCode);
        $("#shopId").val(shopId);
        $("#confirmQuantity").val(confirmQuantity);
        var title = '请输入要货数量'
        if (!shopId){
            title = '需求反馈'
        }
        $("#authorizationInfoContent").removeClass("hide")
        modalIndex = layer.open({
            type: 1,
            title: title,
            closeBtn: 1,
            shadeClose: true,
            maxmin: true,
            area: ['260px', '110px'],
            skin: 'yourclass',
            content: $("#authorizationInfoContent"),
            end: function () {
                $("#authorizationInfoContent").addClass("hide")
            }
        });
        layer.closeAll('loading')
    }


    $(function () {
        getXYShopTobacco();
    })
</script>
</body>
</html>
